<!-- 平台---卖家销量统计页面 -->
<template>
  <div class="app-container">
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small" inline>
          <el-row>
            <!-- 时间选择 -->
            <el-form-item :label="$t('时间选择')">
              <el-date-picker
                v-model="queryParams.time"
                type="daterange"
                @change="getList"
                :clearable="false"
                value-format="yyyy-MM-dd"
              />
            </el-form-item>

            <!-- 卖家 -->
            <el-form-item label="卖家" prop="spNo">
              <el-input @keyup.enter.native="handleQuery" clearable v-model="queryParams.distrName" />
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
    </PageSearch>

    <el-table
      :height="showSearch ? calTableHeight() - 50 : calTableHeight()"
      v-loading="loading"
      ref="TableRef"
      :data="tableData"
      row-key="menuId"
    >
      <el-table-column align="center" show-overflow-tooltip prop="distrName" label="卖家" />
      <el-table-column align="center" show-overflow-tooltip prop="orderNum" label="订单数量">
        <template slot-scope="scope">
          <a class="a-chart" @click="handleShowChart(scope, 1)">
            {{ scope.row.orderNum }}
          </a>
        </template>
      </el-table-column>

      <el-table-column align="center" show-overflow-tooltip prop="turnover" label="营业额">
        <template slot-scope="scope">
          <a class="a-chart" @click="handleShowChart(scope, 2, true)">
            {{ scope.row.turnover | thousand }}
          </a>
        </template>
      </el-table-column>

      <el-table-column align="center" show-overflow-tooltip prop="packageNum" label="包裹数量">
        <template slot-scope="scope">
          <a class="a-chart" @click="handleShowChart(scope, 3)">
            {{ scope.row.packageNum }}
          </a>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="deliveryFee" label="快递费用">
        <template slot-scope="scope">
          <a class="a-chart" @click="handleShowChart(scope, 4, true)">
            {{ scope.row.deliveryFee ? (+scope.row.deliveryFee).toFixed() : '' | thousand }}
          </a>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="bundleFee" label="捆包费用">
        <template slot-scope="scope">
          <a class="a-chart" @click="handleShowChart(scope, 5, true)">
            {{ scope.row.bundleFee ? (+scope.row.bundleFee).toFixed() : '' | thousand }}
          </a>
        </template>
      </el-table-column>

      <el-table-column align="center" show-overflow-tooltip prop="commission" label="平台手续费">
        <template slot-scope="scope">
          <a class="a-chart" @click="handleShowChart(scope, 6, true)">
            {{ scope.row.commission ? (+scope.row.commission).toFixed() : '' | thousand }}
          </a>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" show-overflow-tooltip prop="profit" label="利润" /> -->
      <el-table-column align="center" label="销量趋势（销量）" width="250">
        <template slot-scope="{ row }">
          <div :id="'main' + row.distrId" style="width: 250px; height: 60px"></div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <SellerSaleChart
      :show.sync="sellerSaleChart.show"
      :useThousand="sellerSaleChart.useThousand"
      :formData="sellerSaleChart.formData"
      :title="chartTitle"
    />
  </div>
</template>

<script>
import { getSalesVolumeListByPlatform } from '@/api/statistics/sellerSalePlatform'
import * as echarts from 'echarts'
import useStaticsConfig from '@/utils/useStaticsConfig'
import SellerSaleChart from './components/sellerSaleChart.vue'
import { checkPermi } from '@/utils/permission'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'SellerSalePlatform',
  components: {
    SellerSaleChart,
  },
  data() {
    return {
      chartTitle: '',
      sellerSaleChart: {
        show: false,
        useThousand: false,
        formData: {},
      },

      showSearch: true,
      form: {},
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        distrName: '',
        time: [],
      },
    }
  },
  async created() {
    this.queryParams.time = this.setStatisticsDefautTime('day')
    this.getList()
  },

  methods: {
    handleShowChart(scope, type, useThousand = false) {
      const flag = checkPermi(['distribution:distributor:getSalesVolumePlatformPie']) //无权限 返回
      if (!flag) return
      const {
        column: { property, label },
        row,
      } = scope
      this.chartTitle = label
      const formData = {
        ...row,
        type,
        time: this.queryParams.time,
        shopId: 'null',
      }
      this.sellerSaleChart.formData = formData
      this.sellerSaleChart.useThousand = useThousand
      this.sellerSaleChart.show = true
    },
    drawCharts() {
      function draw(id, item) {
        const xData = item?.salesVolumeList.map((i) => i.createTime?.split(' ')[0])
        const yData = item?.salesVolumeList.map((item) => item.saleNum)
        const { tooltip, xAxis, yAxis, grid, series } = useStaticsConfig(xData, yData)
        const option = { tooltip, xAxis, yAxis, grid, series }
        const chartDom = document.getElementById('main' + id)

        let myChart = echarts.getInstanceByDom(chartDom)

        if (myChart == null) {
          myChart = echarts.init(chartDom)
        }
        myChart.setOption(option)
      }

      for (const item of this.tableData) {
        draw(item.distrId, item)
      }
    },
    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        startTime,
        endTime,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      this.loading = true
      getSalesVolumeListByPlatform(data).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
        this.$nextTick(() => {
          this.drawCharts()
        })
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.distrName = ''
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10
      this.queryParams.time = this.setStatisticsDefautTime('day')

      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped>
.a-chart {
  color: #1890ff;
}
</style>
